﻿@using FutureGoodsProperty = FutureApp.Shop.GoodsProperty
@using FutureGoodsPropertyValue = FutureApp.Shop.GoodsPropertyValue
@model FutureApp.Shop.Dto.GoodsPropertyEntityDto

@section Scripts{
    <script>
        !function ($) {
            var $$$ = function () {
                this.$box = $('.box');
                this.$form = $('form');
                this.service = abp.services.app.goodsProperty;
                this.localize = abp.localization.localize;
                this.tagValues = ['@Html.Raw(string.Join("','",this.Model.Values))'];
            };
            $$$.prototype = {
                init: function () {
                    this.formSubmit();
                    this.binding();
                },
                formSubmit: function () {
                    this.$form.submit(function (e) {
                        e.preventDefault();
                    });
                },
                template: function () {
                    return '\
                        <div class="input-group" style="padding-right:15px;padding-bottom:15px">\
                            <input name="valueCollection[]" type="text" class="form-control" readonly>\
                            <span class="input-group-btn">\
                                <a class="btn btn-danger" href="javascript:;" data-action="remove">\
                                    <i class="fa fa-times"></i>\
                                </a>\
                            </span>\
                        </div>\
                    ';
                },
                binding: function () {
                    var self = this;
                    self.$box.on("click", '.btn', function (e) {
                        e.preventDefault();

                        var $sender = $(e.currentTarget);
                        var action = $.trim($sender.data("action"));
                        switch (action) {
                            case "submit":
                                self.submit();
                                break;
                            case "remove":
                                self.remove($sender);
                                break;
                            case "attach":
                                self.attach($sender);
                                break;
                        }
                    });
                    self.$box.find("input.form-input-tag")
                        .keydown(function (e) {
                            if (e.keyCode !== 13) return;
                            self.attach($(e.currentTarget));
                        });
                },
                attach: function (sender) {
                    var input = sender.parents(".input-group").find("input");
                    var val = input.val();
                    if (!val) return;
                    if (this.tagValues.indexOf(val) !== -1) return;
                    this.tagValues.push(val);
                    input.val("");
                    var tpl = $(this.template());
                    tpl.find('input').val(val);
                    sender.parents(".form-group").siblings(".form-tag").append(tpl).append("\n");
                },
                remove: function (sender) {
                    var group = sender.parents(".input-group");
                    var input = group.find("input");
                    var val = input.val();
                    this.tagValues.splice(this.tagValues.indexOf(val), 1);
                    group.remove();
                },
                submit: function () {
                    var self = this;
                    var data = self.$form.serializeFormToObject();
                    abp.ui.setBusy(self.$box);
                    self.service.defineGoodsPropertyValue(data)
                        .done(function () {
                            abp.message.success(self.localize("EditGoodsPropertySucceed"))
                                .done(function () { location.href = "@Url.Action("list")"; });
                        })
                        .always(function () {
                            abp.ui.clearBusy(self.$box);
                        });
                }
            };

            $(function () { (new $$$()).init(); });
        }(jQuery);
    </script>
}
<ul class="content-nav">
    <li>
        <a href="@Url.Action("list")">@L("List")</a>
    </li>
    <li>
        <a href="@Url.Action("add")">@L("Add")</a>
    </li>
    <li class="active">
        <a href="javascript:;">@L("Edit")【@this.Model.Name】</a>
    </li>
</ul>
<div class="box box-success box-edge-all" data-dock="true">
    <form role="form" class="col-xs-10">
        <div class="box-body">
            <input name="GoodsProperty" type="hidden" value="@this.Model.Id" />
            <div class="form-group">
                <label>@L("GoodsPropertyName")</label>
                <input name="Name" type="text" class="form-control" value="@this.Model.Name" maxlength="@FutureGoodsProperty.MaxNameLength" readonly>
            </div>
            <div class="form-group">
                <label>@L("GoodsPropertyValues")</label>
                <div class="input-group">
                    <input type="text" class="form-control form-input-tag" maxlength="@FutureGoodsPropertyValue.MaxValueLength" autofocus>
                    <span class="input-group-btn">
                        <a class="btn btn-primary" href="javascript:;" data-action="attach">
                            <i class="fa fa-plus"></i>
                        </a>
                    </span>
                </div>
            </div>
            <div class="form-group form-inline form-tag">
                @foreach (var val in this.Model.Values)
                {
                    <div class="input-group" style="padding-right:15px;padding-bottom:15px">
                        <input type="text" class="form-control" value="@val.Value" readonly>
                        <span class="input-group-btn">
                            <a class="btn btn-default active" href="javascript:;">
                                <i class="fa fa-tag"></i>
                            </a>
                        </span>
                    </div>
                }
            </div>
        </div>
        <div class="box-footer">
            <a class="btn btn-primary" href="javascript:;" data-action="submit">
                <i class="fa fa-check"></i>
                @L("Submit")
            </a>
        </div>
    </form>
</div>